<template>
	<view>
		<uv-popup ref="popupBox" mode="bottom" :round="10" @maskClick="closeFunc">
			<view class="title">上传设计图</view>
			<scroll-view class="scroll-view" scroll-y>
				<view class="uv-form-box">
					<uv-form labelPosition="top" :model="formData" ref="form" labelWidth="auto" :labelStyle="formItemStyle">
						<uv-form-item label="平面图 (.jpg,.png,.gif,.dwg,.pdf,.zip,.pptx)">
							<view class="upload-box">
								<view class="upload-item" v-for="(item, index) in formData.plan_drawing" :key="index">
									<image class="upload-img" mode="aspectFill" :src="getFormatUrl(item)"></image>
									<view class="upload-close" @click="deletePic({file: item, index}, 'plan_drawing')">
										<view class="icon-close">
											<uv-icon name="close" size="7" color="#fff"></uv-icon>
										</view>
									</view>
								</view>
								<view class="upload-item" @click="chooseClick('.jpg,.png,.gif,.dwg,.pdf,.zip,.pptx', 'plan_drawing')">
									<uv-icon name="plus" color="#DDE2EE" size="14"></uv-icon>
								</view>
							</view>
						</uv-form-item>
						<uv-form-item label="效果图 (.jpg,.png,.gif,.zip,.ppt,.ppsx,.pptx,.psd)">
							<view class="upload-box">
								<view class="upload-item" v-for="(item, index) in formData.effect_drawing" :key="index">
									<image class="upload-img" mode="aspectFill" :src="getFormatUrl(item)"></image>
									<view class="upload-close" @click="deletePic({file: item, index}, 'effect_drawing')">
										<view class="icon-close">
											<uv-icon name="close" size="7" color="#fff"></uv-icon>
										</view>
									</view>
								</view>
								<view class="upload-item"
									@click="chooseClick('.jpg,.png,.gif,.zip,.ppt,.ppsx,.pptx,.psd', 'effect_drawing')">
									<uv-icon name="plus" color="#DDE2EE" size="14"></uv-icon>
								</view>
							</view>
						</uv-form-item>
						<uv-form-item label="施工图 (.jpg,.png,.gif,.zip,.ppt,.ppsx,.pptx,.psd)" prop="after_sales_file">
							<view class="upload-box">
								<view class="upload-item" v-for="(item, index) in formData.construction_drawing" :key="index">
									<image class="upload-img" mode="aspectFill" :src="getFormatUrl(item)"></image>
									<view class="upload-close" @click="deletePic({file: item, index}, 'construction_drawing')">
										<view class="icon-close">
											<uv-icon name="close" size="7" color="#fff"></uv-icon>
										</view>
									</view>
								</view>
								<view class="upload-item"
									@click="chooseClick('.jpg,.png,.gif,.zip,.ppt,.ppsx,.pptx,.psd', 'construction_drawing')">
									<uv-icon name="plus" color="#DDE2EE" size="14"></uv-icon>
								</view>
							</view>
						</uv-form-item>
					</uv-form>
				</view>
			</scroll-view>
			<view class="btn-box">
				<uv-button @click="closeFunc" text="取 消" customTextStyle="font-weight: 400;font-size: 28rpx;color: #8F8F8F;"
					customStyle="width: 180rpx;height: 80rpx;background: #FFFFFF;border-radius: 16rpx;border: 2rpx solid #E3E3E3;margin-bottom:20rpx;"></uv-button>
				<uv-button @click="formSubmit" type="primary" text="提 交"
					customTextStyle="font-weight: 400;font-size: 28rpx;color: #FFFFFF;"
					customStyle="width: 500rpx;height: 80rpx;background: #3B75FF;border-radius: 16rpx;margin-bottom:20rpx;"></uv-button>
			</view>

			<uv-action-sheet ref="actionSheet" :closeOnClickOverlay="true" :actions="actionlist" cancelText="取消"
				@select="actionselect">
			</uv-action-sheet>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		props: ['show', 'project_info'],
		data() {
			return {
				actionlist: [{
					id: 1,
					name: '拍照',
				}, {
					id: 2,
					name: '从手机相册选择',
				}, {
					id: 3,
					name: '从聊天记录选择',
				}],
				upLoadFormat: [],
				upLoadType: '',
				formData: {
					plan_drawing: [],
					effect_drawing: [],
					construction_drawing: []
				},
				delete_arr: [],
				// 判断是否有修改
				isChange: false,
				imgLength: 0
			};
		},
		computed: {
			formItemStyle() {
				return {
					color: '#828A9D',
					fontSize: '26rpx'
				};
			},
			getFormatUrl() {
				return item => {
					console.log(item);
					var fileName = item.url
					var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);
					console.log(fileExtension);
					let src = ''
					let word = '/static/file_icon/word.png'
					let cad = '/static/file_icon/cad.png'
					let excel = '/static/file_icon/excel.png'
					let pdf = '/static/file_icon/pdf.png'
					let ppt = '/static/file_icon/ppt.png'
					let zip = '/static/file_icon/zip.png'
					let other = '/static/file_icon/other.png'
					let video = '/static/file_icon/video.png'
					switch (fileExtension) {
						case 'doc':
							src = word;
							break;
						case 'docx':
							src = word;
							break;
						case 'pptx':
							src = ppt;
							break;
						case 'pptm':
							src = ppt;
							break;
						case 'ppt':
							src = ppt;
							break;
						case 'pdf':
							src = pdf;
							break;
						case 'xls':
							src = excel;
							break;
						case 'xlsx':
							src = excel;
							break;
						case 'zip':
							src = zip;
							break;
						case 'dwg':
							src = cad;
							break;
						case 'dxf':
							src = cad;
							break;
						case 'dwt':
							src = cad;
							break;
						case 'dwf':
							src = cad;
							break;
						default:
							let img_type_arr = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'];
							let video_type_arr = ['mp4', 'avi', 'mkv', 'rmvb', 'MOV', 'm4v']

							if (img_type_arr.indexOf(fileExtension) != -1) {
								src = fileName
							} else if (video_type_arr.indexOf(fileExtension) != -1) {
								src = video
							} else {
								src = other
							}
					}
					return src
				}
			},
		},
		watch: {
			show(value) {
				if (value) {
					this.getDetail();
				} else {
					this.$refs.popupBox.close();
				}
			}
		},
		mounted() {},
		methods: {
			chooseClick(str, name) {
				this.upLoadFormat = str.split(',')
				this.upLoadType = name
				this.$refs.actionSheet.open()
			},
			actionselect(e) {
				console.log(e, 'actionselect');
				let that = this
				let type = this.upLoadType
				if (e.id != 3) {
					if (e.id == 1) {
						var sourceType = ['camera']
					} else {
						var sourceType = ['album']
					}
					uni.chooseImage({
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType, //从相册选择
						success: function(res) {
							console.log(res.tempFilePaths);
							res.tempFilePaths.map(item => {
								that.formData[type].push({
									url: item,
									type
								});
							})
						}
					});
				} else {
					let upLoadFormat = this.upLoadFormat
					console.log(upLoadFormat);
					wx.chooseMessageFile({
						count: 9, //默认100
						success: function(res) {
							const tempFilePaths = res.tempFiles
							console.log(res.tempFiles);
							res.tempFiles.map(item => {
								var fileName = item.path
								var fileExtension = '.' + fileName.substring(fileName.lastIndexOf('.') + 1);
								if (upLoadFormat.includes(fileExtension)) {
									that.formData[type].push({
										url: fileName,
										type
									});
								}
							})
						}
					});
				}
			},

			afterRead(e, type) {
				console.log(e, type);
				this.isChange = true;
				this.formData[type].push({
					url: e.file.url,
					type
				});
			},
			deletePic(e, type) {
				console.log(e, type);
				this.isChange = true;
				if (e.file.file_id) {
					e.file.type = type;
					e.file.delete = true;
					this.delete_arr.push(e.file);
				}
				let index = e.index;
				this.formData[type].splice(index, 1);
			},
			closeFunc() {
				this.$emit('close', false);
			},
			formSubmit() {
				let formData = this.formData;
				let arr = [
					...formData.plan_drawing,
					...formData.effect_drawing,
					...formData.construction_drawing
				];
				console.log(arr);
				if (arr.length == 0) {
					uni.showToast({
						title: '请至少上传一种！',
						icon: 'none'
					});
					return;
				}
				// 修改时判断
				if (arr.length == this.imgLength && !this.isChange) {
					uni.showToast({
						title: '没有改动，无需提交',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					mask: true,
					title: '信息提交中...'
				});

				if (this.project_info.status > 1060) {
					let upArr = [];
					arr.map((item) => {
						if (!item.file_id) {
							upArr.push(item);
						}
					});
					console.log(upArr, this.delete_arr, 'ssss');
					let obj = {
						project_id: this.project_info.id,
						plan_drawing: [],
						effect_drawing: [],
						construction_drawing: [],
						delete_arr: this.delete_arr,
						remark: ''
					};

					if (upArr.length != 0) {
						this.$upload(upArr).then((res) => {
							res.arrResult.map((item) => {
								obj[item.w_type].push(item);
								delete item.w_type;
							});
							console.log(obj, 'sss');
							this.khUpdDesignDrawings(obj);
						});
					} else {
						this.khUpdDesignDrawings(obj);
					}
				} else {
					this.$upload(arr).then((res) => {
						let obj = {
							project_id: this.project_info.id,
							plan_drawing: [],
							effect_drawing: [],
							construction_drawing: [],
							remark: ''
						};
						res.arrResult.map((item) => {
							obj[item.w_type].push(item);
							delete item.w_type;
						});
						console.log(obj, 'sss');

						this.$Api.khUploadDesignDrawings(obj).then((res) => {
							console.log(res, '上传设计图');
							uni.hideLoading();
							if (res.code == 200) {
								this.$emit('close', false);
								this.$emit('lazy');
							}
							uni.showToast({
								title: res.code == 200 ? '操作成功' : res.message,
								icon: res.code == 200 ? 'success' : 'error'
							});
						});
					});
				}
			},

			khUpdDesignDrawings(obj) {
				this.$Api.khUpdDesignDrawings(obj).then((res) => {
					console.log(res, '更新');
					uni.hideLoading();
					if (res.code == 200) {
						this.$emit('close', false);
						this.$emit('lazy');
					}
					uni.showToast({
						title: res.code == 200 ? '操作成功' : res.message,
						icon: res.code == 200 ? 'success' : 'error'
					});
				});
			},
			getDetail() {
				this.$Api
					.khGetProjectDetails({
						project_id: this.project_info.id,
						tab_type: 3
					})
					.then((res) => {
						console.log(res, '详情');
						if (res.code == 200) {
							res.data = res.data.DesignDrawings;

							res.data.plan_drawing.map((item) => {
								item.url = item.file_url;
							});
							this.formData.plan_drawing = res.data.plan_drawing;

							res.data.effect_drawing.map((item) => {
								item.url = item.file_url;
							});
							this.formData.effect_drawing = res.data.effect_drawing;

							res.data.construction_drawing.map((item) => {
								item.url = item.file_url;
							});
							this.formData.construction_drawing = res.data.construction_drawing;

							this.$refs.popupBox.open();
							this.imgLength =
								res.data.plan_drawing.length +
								res.data.effect_drawing.length +
								res.data.construction_drawing.length;
						}
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.title {
		font-size: 32rpx;
		width: 100%;
		line-height: 100rpx;
		text-align: center;
	}

	.btn-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}

	.scroll-view {
		width: 100%;
		max-height: 50vh;
		background-color: #fff;

		// padding: 0 30rpx;
		// box-sizing: border-box;
		.uv-form-box {
			padding: 0 30rpx !important;
		}

		.file-box {
			width: 100%;
			display: flex;
			flex-direction: row-reverse;
		}

		.file-list {
			width: 100%;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.file-item {
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;
				margin-left: 10rpx;
				padding: 10rpx;
				background-color: #f8f8f8;
				width: 90%;

				.file-name {
					font-size: 24rpx;
					overflow: hidden;
					/* 确保溢出文本会被隐藏 */
					white-space: nowrap;
					/* 确保文本在一行内显示 */
					text-overflow: ellipsis;
					/* 使用省略号显示文本溢出的部分 */
					width: 80%;
				}
			}

			.file-media {
				width: 150rpx;
				height: 150rpx;
				margin: 0 27rpx 22rpx 0;
				overflow: hidden;
				border-radius: 10rpx;
				position: relative;

				&:nth-child(4n) {
					margin-right: 0;
				}

				.media-item {
					width: 100%;
					height: 100%;
				}

				.icon-box {
					position: absolute;
					z-index: 1;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					background-color: rgba(0, 0, 0, 0.6);
					width: 70rpx;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
				}

				.del-icon {
					width: 60rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					right: 10rpx;
					top: 10rpx;
					z-index: 1;
					background-color: rgba(0, 0, 0, 0.6);
					border-radius: 10rpx;
				}
			}
		}
	}

	.upload-box {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.upload-item {
			width: 110rpx;
			height: 110rpx;
			border-radius: 8rpx;
			border: 2rpx solid #dde2ee;
			margin: 0 10rpx 10rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			position: relative;

			.upload-img {
				width: 100%;
				height: 100%;
			}

			.upload-close {
				position: absolute;
				top: 0;
				right: 0;
				background-color: #373737;
				height: 14px;
				width: 14px;
				display: flex;
				flex-direction: row;
				border-bottom-left-radius: 100px;
				align-items: center;
				justify-content: center;
				z-index: 3;

				.icon-close {
					transform: translate(1.5px, -1.5px);
				}
			}
		}
	}
</style>